<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
    <title>交易记录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <!-- load css -->
    <link rel="stylesheet" th:href="@{/css/font.css}" />
	<link rel="stylesheet" th:href="@{/css/xadmin.css}" />
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
</head>
<body class="layui-anim layui-anim-fadein">
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a>交易管理</a>
        <a><cite>交易记录</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
      <div class="layui-row">
        <div class="layui-form layui-col-md12 x-so">
          <input id="id" type="text" name="id"   placeholder="平台订单号" autocomplete="off" class="layui-input">
          <input id="merchant_order_no" type="text" name="merchant_order_no"  placeholder="商户订单号" autocomplete="off" class="layui-input">
         <div class="layui-input-inline">
            <select id="pay_type" name="pay_type">
              <option value="">支付类型</option>
               <option value="alipay">支付宝</option>
               <option value="alipaySdk">支付宝sdk</option>
               <option value="wechat">微信</option>
               <option value="wechatScan">微信扫码</option>
            </select>
          </div>
          <div class="layui-input-inline">
            <select id="status" name="status">
              <option value="">订单状态</option>
              <option value="0">未支付</option>
              <option value="1">已支付</option>
            </select>
          </div>
          <div class="layui-input-inline">
            <select id="notify_status" name="notify_status">
              <option value="">回调状态</option>
              <option value="0">未回调</option>
              <option value="1">已回调</option>
            </select>
          </div>
          <button id="searchBtn" data-type="reload" class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
          <button class="layui-btn" style="margin-left: 50px;" onclick="exportExcel()"><i class="layui-icon"></i>导出订单</button>
        </div>
      </div>
      <table class="layui-hide" id="table1" lay-filter="tool1"></table>
      </div>
<script type="text/html" id="statusTpl">
{{#   if(d.status == 0){ }}
<span>未支付</span>
{{#  }else if(d.status == -1){  }}
<span style="color: blue;">产码中</span>
{{#  }else if(d.status == 1){  }}
<span style="color: green;">已支付</span>
{{#  }else if(d.status == 4){  }}
<span style="color: red;">产码失败</span>
{{#  }  }}
</script>
<script type="text/html" id="notifyStatusTpl">
{{#  if(d.notify_status == 0){ }}
<span>未回调</span>
{{#  }else if(d.notify_status == 1){  }}
<span style="color: green;">已回调</span>
{{#  }  }}
</script>
<script type="text/html" id="payTypeTpl">
{{#  if(d.pay_type == 'wechat'){  }}
<span style="color: green;">微信</span>
{{#  }else if(d.pay_type == 'wechatScan'){  }}
<span style="color: green;">微信扫码</span>
{{#  }else if(d.pay_type == 'alipay'){  }}
<span style="color: blue;">支付宝</span>
{{#  }else if(d.pay_type == 'alipaySdk'){  }}
<span style="color: blue;">支付宝sdk</span>
{{#  }  }}
</script>
<script>
	function exportExcel()
	{
		var postData={
				'id': $('#id').val(),
	            'merchant_order_no':$('#merchant_order_no').val(),
	            'pay_type': $('#pay_type').val(),
	            'status': $('#status').val(),
	            'notify_status': $('#notify_status').val(),
		    };
			var tempform = document.createElement("form");      
		    tempform.action = '[[@{/merchant/order/orderExport.html}]]';      
		    tempform.target = "_blank";
		    tempform.method = "post";      
		    tempform.style.display = "none"; 
			for (var x in postData) { 
				var opt = document.createElement("input");      
				opt.name = x;      
		        opt.value = postData[x];      
		        tempform.appendChild(opt);      
		    }      
		    document.body.appendChild(tempform);
		    tempform.submit(); 
	}
	
      layui.use(['laydate', 'laypage', 'table'], function(){
        var laydate = layui.laydate,
        table = layui.table, //表格
        laypage = layui.laypage; //分页
        //执行一个 table 实例
        table.render({
          elem: '#table1'
          ,height: 680
          ,limit: 15
          ,limits:[15,20,30,40,50,60,70,80,90]
          ,url: '[[@{/merchant/order/list.html}]]' //数据接口
          ,id:'table1'
          ,page: true
          ,cols: [
           [
            {field: 'id', title: '平台订单号', width:'12%', sort: true, align:'center',fixed: 'left'}
            ,{field: 'merchant_order_no', title: '商户订单号', width:'16%', align:'center'}
            ,{field: 'amount', title: '订单金额', align:'center', width:'12%'}
            ,{field: 'pay_type', title: '支付类型', width:'12%', align:'center',templet:'#payTypeTpl'}
            ,{field: 'create_time', title: '下单时间', width:'12%', align:'center'}
            ,{field: 'pay_time', title: '支付时间', width:'12%', align:'center'}
            ,{field: 'status', title: '支付状态', width: '12%',templet:'#statusTpl', align:'center'}
            ,{field: 'notify_status', title: '回调状态', width: '12%',templet:'#notifyStatusTpl', align:'center'}
          ]
          ]
        });
        $('#searchBtn').on('click', function(){
        	var index = layer.msg('查询中，请稍候...',{icon: 16,time:false,shade:0});
        	table.reload('table1', {
    	        page: {
    	          curr: 1 //重新从第 1 页开始
    	        }
    	        ,where: {
    	        	'id': $('#id').val(),
    	            'merchant_order_no':$('#merchant_order_no').val(),
    	            'pay_type': $('#pay_type').val(),
    	            'status': $('#status').val(),
    	            'notify_status': $('#notify_status').val(),
    	        }
    	      });
        	layer.close(index);
       });
        
      //监听工具条
        table.on('tool(tool1)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
          var data = obj.data //获得当前行数据
          ,layEvent = obj.event; //获得 lay-event 对应的值
          if(layEvent === 'detail'){
            //alert(JSON.stringify(data));
          } else if(layEvent === 'edit'){
          } else if(layEvent === 'del'){
          }
        });
      });
    </script>
  </body>
</html>
